<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
ul{padding:0; margin:0;}
li{list-style:none;}
body{background:#ccc;}
.box{width:250px; height:300px; position:relative; float: left;margin-left: 60px; }
.box img{width:250px; height:300px;}
.box ul{width:40px; position:absolute;top:0; right:-50px;}
.box li{width:40px; height:40px; margin-bottom:4px; background:#666;}
.box .active{background:#fc3;}.box span{top:0;}.box p{bottom:0; margin:0;}
.box p,.box span{position:absolute;left:0;width:250px; height:30px; line-height:30px; text-align:center;color:#333;}
</style>
<script>
window.onload=function(){
	fnTab("pic1",["img/1.png","img/2.png","img/10.png","img/12.png"],['wo','ai','ni','wo'],"onclick");
	fnTab("pic2",["img/2.png","img/1.png","img/10.png","img/12.png"],['wo','ai','ni','wo'],"onmouseover");
	};

function fnTab( id,arrUrl,arrText,evt ){
	var oDiv=document.getElementById(id);
	var oImg=oDiv.getElementsByTagName('img')[0];
	var oSpan=oDiv.getElementsByTagName('span')[0];
	var oP=oDiv.getElementsByTagName('p')[0];
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	var oActive=oUl.getElementsByTagName('active');
	// var arrUrl=["img/1.png","img/2.png","img/10.png","img/12.png"];
	// var arrText=['wo','ai','ni','wo'];
	var num=0;	
	for(var i=0;i<arrUrl.length;i++){
		oUl.innerHTML+='<li></li>';
		}	
	//初始化
	oImg.src=arrUrl[num];
	oSpan.innerHTML=1+num+'/'+arrUrl.length;
	oP.innerHTML=arrText[num];
	aLi[num].className='active';	
	for(var i=0;i<aLi.length;i++){
		aLi[i].index=i;   //索引值
		aLi[i][evt]=function(){
		oImg.src=arrUrl[this.index];
		oP.innerHTML=arrText[this.index];
		oSpan.innerHTML=1+this.index+'/'+arrText.length;
		
		for(var i=0;i<aLi.length;i++){
			aLi[i].className='';
			}
			this.className='active';
			}
		}	
	}
</script>
</head>
<body>
<div id="pic1" class="box">
 <img src=""/>
 <span>数量正在加载中</span>
 <p>文字说明正在加载中</p>
<ul></ul>
</div>

<div id="pic2" class="box">
 <img src=""/>
 <span>数量正在加载中</span>
 <p>文字说明正在加载中</p>
<ul></ul>
</div>



</body>
</html>
